<template> 
 <div id="login">
     <div class="register-container">
       <el-form :model="formdata" :rules="rules" ref="registerForm" label-width="100px" class="register-form">  
         <h2 class="title">注册新用户</h2>  
         <el-form-item label="用户名" prop="username">  
           <el-input v-model="formdata.username" autocomplete="off"></el-input>  
         </el-form-item>  
         <el-form-item label="密码" prop="password">  
           <el-input type="password" v-model="formdata.password" autocomplete="new-password"></el-input>  
         </el-form-item>  
         <el-form-item label="确认密码" prop="repassword">  
           <el-input type="password" v-model="formdata.repassword" autocomplete="new-password"></el-input>  
         </el-form-item>  
         <el-form-item>  
           <el-button type="primary" @click="handleRegister">注册</el-button>  
           <el-button @click="resetForm">重置</el-button>  
         </el-form-item>  
       </el-form>  
     </div>  
 </div>
</template>  
  
<script>  
export default {  
  name: 'RegisterView',  
  data() {  
    const validatePass = (rule, value, callback) => {  
      if (value === '') {  
        callback(new Error('请输入密码'));  
      } else {  
        if (this.formdata.repassword !== '') {  
          this.$refs.registerForm.validateField('repassword');  
        }  
        callback();  
      }  
    };  
    const validatePass2 = (rule, value, callback) => {  
      if (value === '') {  
        callback(new Error('请再次输入密码'));  
      } else if (value !== this.formdata.password) {  
        callback(new Error('两次输入密码不一致!'));  
      } else {  
        callback();  
      }  
    };  
    return {  
      formdata: {  
        username: '',  
        password: '',  
        repassword: ''  
      },  
      rules: {  
        username: [  
          { required: true, message: '请输入用户名', trigger: 'blur' }  
        ],  
        password: [  
          { validator: validatePass, trigger: 'blur' }  
        ],  
        repassword: [  
          { validator: validatePass2, trigger: 'blur' }  
        ]  
      }  
    };  
  },  
  methods: {  
    handleRegister() {  
          // 获取表单数据
          const username = this.formdata.username;  
          const password = this.formdata.password;  
          const repassword = this.formdata.repassword;  
          // 使用 GET 方法发送请求
          this.axios.get('UsersRegister', {  
              params: {  
                username,
                password,  
                repassword  
              }  
          })
         .then(response => {  
            console.log(response);
            alert('注册成功！');  
            this.$router.push('/login');  
          })  
         .catch(error => {  
            console.error(error);  
            alert('注册失败！');  
          });  
        }  
  }  
};  
</script>  
  
<style lang ='less'scoped>  
.register-container {  
  max-width: 400px;  
  margin: 50px auto;  
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);  
  border-radius: 8px;  
  background-color: skyblue;
}  
  
.register-form {  
  margin-top: 20px;  
}  
  
.title {  
  text-align: center;  
  margin-bottom: 20px;  
  color: #333
}
#login {
  width: 100%;
  height: 98vh;
  overflow: hidden;
  position: absolute;
  // 背景图片样式
  background-image: url("../assets/img/water.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

</style>